<template>

    <DocumentReaderContainer>

        <div class="document-review-container">
            <el-row>
                <el-col :span="24">
                    <div class="review-header-title">
                        <RoleSelectPanel 
                            :currentSeneInfo="currentSceneInfo" 
                            @openExecuteHandle="openExecuteHandle"
                            ref="roleSelectPanelRef" />
                    </div>
                    <div class="review-main-content">


                        <div class="review-header-content">
                            <div class="review-title">
                                <i class="fa-solid fa-file-shield"></i>
                                太多太长读不懂，一键上传分析阅读
                            </div>
                            <div class="review-description">可以辅助您阅读论文课件、财报合同、图书小说、微信公众号、知乎、csdn、bilibili</div>
                        </div>
                        <div class="review-upload-container">
                            <el-upload class="upload-demo" drag :file-list="imageUrl"
                                :action="upload.url + '?sceneId=' + currentSceneInfo.id" :auto-upload="true"
                                accept=".doc,.docx,.pdf" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload" :headers="upload.headers" multiple>

                                <el-icon class="el-icon--upload">
                                    <i class="fa-solid fa-file-arrow-up"></i>
                                </el-icon>
                                <div class="el-upload__text">
                                    <em>点击上传</em>或将文档拖拽到这里上传
                                </div>

                                <div class="upload-type-icon">
                                    <span class="type-item">
                                        <i class="fa-solid fa-file-word"></i>
                                    </span>
                                    <span class="type-item">
                                        <i class="fa-solid fa-file-pdf"></i>
                                    </span>
                                    <span class="type-item">
                                        <i class="fa-solid fa-file-powerpoint"></i>
                                    </span>
                                    <span class="type-item">
                                        <i class="fa-solid fa-link"></i>
                                    </span>
                                </div>

                                <template #tip>
                                    <div class="el-upload__tip">
                                        单个阅读文件的字数不超过10万字，格式支持：doc/docx/pdf/excel等
                                    </div>
                                </template>

                            </el-upload>
                        </div>


                    </div>
                    <div class="review-footer-message">
                        服务生成的所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不能代表我们的态度和观点。
                    </div>
                </el-col>
            </el-row>

        </div>

        <!-- 运行抽屉 -->
        <div class="aip-flow-drawer flow-control-panel">
            <el-drawer v-model="showDebugRunDialog" :modal="false" size="40%" style="max-width: 700px;" title="预览与调试"
                :with-header="true">
                <div style="margin-top: 0px;">
                    <RoleChatPanel ref="roleChatPanelRef" />
                </div>
            </el-drawer>
        </div>

    </DocumentReaderContainer>
</template>

<script setup>
import { ref } from 'vue';
import { ElLoading, ElMessage } from 'element-plus'
import { getRoleBySceneIdAndAgentType } from '@/api/base/im/scene';
import { getToken } from "@/utils/auth";

import DocumentReaderContainer from './documentReaderContainer'
import RoleSelectPanel from '@/views/base/scene/common/roleSelectPanel'
import RoleChatPanel from '@/views/base/scene/common/chatPanel';

// 设置角色
const roleSelectPanelRef = ref(null)

const uploadLoading = ref(null);

// 角色信息
const summaryAgentEngineers = ref([]);
const caseQueryAgentEngineers = ref([]);

const currentSceneInfo = ref({});

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

import { getScene } from '@/api/base/im/scene/documentReader';

const imageUrl = ref([])

const executeHandleRef = ref(null)
const sceneId = ref(route.query.sceneId)

/*** 应用导入参数 */
const upload = reactive({
    // 是否显示弹出层（应用导入）
    open: false,
    // 弹出层标题（应用导入）
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的应用数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/api/infra/smart/assistant/scene/documentReader/importData",
    // 显示地址
    display: import.meta.env.VITE_APP_BASE_API + "/v1/api/infra/base/im/chat/displayImage/"
});


const openExecuteHandle = () => {
    executeHandleRef.value.handleOpen(currentSceneInfo.value, summaryAgentEngineers.value, caseQueryAgentEngineers.value);
}

/** 图片上传成功 */
const handleAvatarSuccess = (response, uploadFile) => {
    imageUrl.value = response.data ? response.data.split(',').map(url => { return { url: upload.display + url } }) : [];
    uploadLoading.value.close();

    const taskId = response.taskId;
    const channelStreamId = response.channelStreamId;

    // 不能为空
    if (!taskId) {
        ElMessage.error('上传失败！');
        return;
    }

    // 上传成功，进入分析界面
    router.push({
        path: '/scene/documentReader/documentParser',
        query: {
            sceneId: sceneId.value,
            taskId: taskId,
            channelStreamId: channelStreamId
        }
    })

};

/** 图片上传之前 */
const beforeAvatarUpload = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 50) {
        ElMessage.error('Avatar picture size can not exceed 50MB!');
        return false;
    }

    uploadLoading.value = ElLoading.service({
        lock: true,
        text: '文件上传中 ...',
        background: 'rgba(0, 0, 0, 0.7)'
    });

    return true;
};

const handleGetScene = () => {
    getScene(sceneId.value).then(res => {
        currentSceneInfo.value = res.data;

        // handleRoleBySceneIdAndAgentType();

        if (!currentSceneInfo.value.summaryAgentEngineer || !currentSceneInfo.value.readerQueryAgentEngineer) { // 选择配置角色
            roleSelectPanelRef.value.configAgent();
            return;
        }
    })
}

onMounted(() => {
    handleGetScene();
})

</script>

<style lang="scss" scoped>
@import '@/assets/styles/document-review.scss';

:deep(.el-upload-dragger) {
    background: linear-gradient(270deg, #fafafa, #fafafa);
    margin-top: 10px;
    margin-bottom: 20px;
}

:deep(.el-upload__text) {
    font-size: 17px !important;
    font-weight: bold !important;
}

:deep(.el-icon--upload) {
    font-size: 2.5rem !important;
    margin-bottom: 30px;
    margin-top: 20px;
    color: var(--el-text-color-placeholder) !important;
}

:deep(.review-main-content) {
    height: calc(70vh - 0px) !important;
    max-width: 1024px !important;
}

.review-upload-container {
    box-shadow: 0 1px 24px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .08);
    height: auto !important;
    margin-top: 30px;
    margin-bottom: 30px;

    .upload-type-icon {
        display: flex;
        justify-content: center;
        padding: 10px;
        margin-top: 20px;
        gap: 40px;
        font-size: 2.5rem;

        .type-item {
            color: #f56c6c !important;
        }
    }
}
</style>